<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>手机配件</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="/layui/layui.js" charset="utf-8"></script>
</head>
<body>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" placeholder="请按名称搜索" autocomplete="off">
        </div>
        <button class="layui-btn" id="btnserach" lay-event="reload">搜索</button>
        <button class="layui-btn layui-btn-xm" lay-event="add">添加</button>
    </div>
</script>

<div id="updatediv" style="display:none">
    <form class="layui-form" action="" lay-filter="formTest">
        <div class="layui-form-item" style="display:none">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input type="text" name="id"  placeholder="请输入编号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">顶部信息</label>
            <div class="layui-input-block">
                <input type="text" name="top" required  lay-verify="required" placeholder="请输入顶部信息" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" required  lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!-- 上传图片位置 -->
        <div class="layui-form-item">
            <label class="layui-form-label">图片: </label>
            <div class="layui-input-block">
                <button type="button" class="layui-upload-drag" id="test11">
                    <p id="demoText"><i class="layui-icon">&#xe67c;</i>点击上传，或将文件拖拽到此处</p >
                    <img class="layui-upload-img" id="demo1" width="100%" alt="" autocomplete="off">
                </button>
            </div>
        </div>
        <!-- 隐藏域  隐藏图片路径 -->
        <input  id="imgUrls"  name="picture" class="layui-input" style="display:none">


        <div class="layui-form-item">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-block">
                <input type="text" name="count" required  lay-verify="required" placeholder="请输入数量" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接地址</label>
            <div class="layui-input-block">
                <input type="text" name="href" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

    </form>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    layui.use(['table','form','upload','layer'], function(){
        var table = layui.table;
        var $ = layui.$;
        var form=layui.form;
        var upload=layui.upload;
        var layer=layui.layer;

        var depttab=table.render({
            elem: '#test'
            ,type:'GET'
            ,url:'/pei/select'
            ,toolbar: '#toolbarDemo'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id', title: 'id', sort:true,type:'numbers'}
                ,{field:'name', title: '配件名称'}
                ,{field:'top', title: '顶部信息'}
                ,{field:'price', title: '价格'}
                ,{field:'picture', title: '图片'
//                    ,templet:'#rtg'
                    ,templet:'<div><img src="{{ d.picture }}"></div>'
                }
                ,{field:'count', title: '数量'}
                ,{field:'href', title: '链接地址'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page:true
            , done: function(res, curr, count){
                $("#demoReload").val(res.name);
            }

        });

        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确认删除吗？', function(index){
                    //obj.del();
                    $.ajax({
                        url:'/pei/delete/'+data.id,
                        type:'delete',
                        success:function (d){
                            if(d === 1){
                                layer.msg('删除成功！', {
                                    icon: 1,
                                    time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //更新表格
                                    depttab.reload({
                                        page:{
                                            curr: 1 //重新从第 1 页开始
                                        },where: {
                                            name: ""
                                        }
                                    });
                                });
                            }

                        }
                    });
                });
            }else if(obj.event === 'edit'){
                var uplayer = layer.open({
                    type: 1
                    ,anim: 3
                    ,content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });

                //form自动赋值
                form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "id": data.id,
                    "name": data.name
                    ,"top": data.top
                    ,"price":data.price
                    ,"picture":data.picture
                    ,"count":data.count
                    ,"href":data.href
                });

                $("#demoText").text("");
                $('#demo1').attr('src', data.picture);
                //提交
                form.on('submit(formDemo)',function (data){
                    layer.close(uplayer);
                    $.ajax({
                        url:"/pei/update"
                        ,type:"post"
                        ,data:data.field
                        ,success:function (d){
                            $('#demo1').removeAttr('src');
                            console.log(d,typeof(d));
                            if(d === 1){
                                layer.msg('修改已成功！！！', {
                                    icon: 1,
                                    time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //更新表格
                                    depttab.reload();
                                });
                            }
                        }
                    });
                    return false;
                });
            }

        });
        table.on('toolbar(test)', function(obj){
            if(obj.event === 'add'){
                var uplayer = layer.open({
                    type: 1
                    ,anim: 3
                    ,content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                //form自动赋值
                form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值

                    "name": ""
                    ,"top": ""
                    ,"price": ""
                    ,"picture": ""
                    ,"count": ""
                    ,"href": ""
                });


                //提交
                form.on('submit(formDemo)',function (data){
                    layer.close(uplayer);
                    $.ajax({
                        url:"/pei/add"
                        ,type:"post"
                        ,data:data.field
                        ,success:function (d){
                            $('#demo1').removeAttr('src');
                            console.log(d,typeof(d));
                            if(d === 1){
                                layer.msg('添加已成功！！！', {
                                    icon: 1,
                                    time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    depttab.reload();
                                });
                            }
                        }
                    });
                    return false;
                });
            }else if(obj.event === "reload"){
                //执行重载
                depttab.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        name: $('#demoReload').val()
                    }
                });
            }
        });

        //上传监听
        upload.render({
            elem: '#test11',
            url: '/upload',
            auto:true,            //自动提交 开启
            dragDrop: true,       //是否允许拖拽上传
            tailor: true,
            accept:'images',     //允许上传的文件类型
            size:10240,           //设置文件最大可允许上传的大小，单位 KB。不支持ie8/9
            field:'file',		 //MultipartFile file 对应，layui默认就是file,要改动则相应改动
            before: function(obj){//文件上传前的回调
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $("#demoText").text("");
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            },
            //done 上传后的回调  详情见LayUi官方文档
            done: function(res, index, upload) {
                //每个图片上传结束的回调，成功的话，就把新图片的名字保存起来，作为数据提交
                console.log(res.code);
                if(res.code=="1"){
                    layer.msg("上传接口异常");
                }else{
                    $('#imgUrls').val(res.data.src);
                }
            },
            onComplete: function (response) {                // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }

        });

    });


</script>

</body>
</html>